<template>
    <transition name="slide-top">
        <v-touch class="content-blue account-list" v-on:swipedown="backRoute()">
            <div class="content-down immerse-margin">
                <router-link to="/index/wallet">
                    <div><img src="@/assets/img/downdouble.png" alt=""></div>
                </router-link>
            </div>
            <div class="now-wallet">
                <img src="@/assets/img/people.png" alt="">{{ $t('m.wallet.list.prompt[0]') }}
            </div>
            <div class="wallet-first" @click="walletChange(walletCreate)">
                <div class="wallet-img"><img :src="walletCreate.avatar" alt=""></div>
                <div class="wallet-information">
                    <div class="wallet-name">Wallet-1</div>
                    <div class="wallet-title">
                        <div>ETSC</div>
                        <div>ETH</div>
                        <div>{{ addressSub(walletCreate.address) }}</div>
                    </div>
                </div>
                <div class="wallet-remark">...</div>
            </div>
            <div class="lead-wallet">
                <img src="@/assets/img/lead.png" alt="">{{ $t('m.wallet.list.prompt[1]') }}
                <img src="@/assets/img/addwhite.png" alt="" @click="changeRoute('/wallet/import')">
            </div>
            <div class="content-lead">
                <div :class="k==0?'lead-first':'lead-second'" v-for="(v,k) in list" :key="k" @click="walletChange(v)">
                    <div class="wallet-img"><img :src="v.avatar" alt=""></div>
                    <div class="wallet-information">
                        <div class="wallet-name">Wallet-{{ v.index }}</div>
                        <div class="wallet-title">
                            <div>ETSC</div>
                            <div>ETH</div>
                            <div>{{ addressSub(v.address) }}</div>
                        </div>
                    </div>
                    <div class="wallet-remark">...</div>
                </div>
            </div>
        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    import {synWallet} from '@/assets/js/timer/index';

    export default {
        name: 'wallet_list',
        create() {
            synWallet();
        },
        mounted() {
            this.accountList();
        },
        data() {
            return {
                list: [],
            }
        },
        methods: {
            accountList: function () {
                // list
                let wallets = JSON.parse(localStorage.getItem("wallets")) ? JSON.parse(localStorage.getItem("wallets")) : [];
                for (let i in wallets) {
                    if (wallets[i] != this.walletCreate.address) {
                        let obj = JSON.parse(localStorage.getItem(wallets[i]));
                        obj.address = wallets[i];
                        this.list.push(obj);
                    }
                }
            },
            walletChange: function (item) {
                localStorage.setItem("walletActive", item.address);
                synWallet();
                this.aWalletDecode({pKey: '', mnemonic: '', keystore: ''});
                this.aFomoInfo({})
                this.changeRoute('/index/wallet');
            }
        }
    }
</script>
<style scoped>
    @import '../../assets/css/accountList.css';

    .account-list {
        background-color: #353D4B !important;
        overflow: hidden;
    }

</style>
